@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-button-buttonOutline';
@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
@import '../../styles.module';

$appearances: 'primary', 'neutral', 'red';
$sizes: 'xs', 's', 'm', 'l';
$variants: 'label-only', 'icon-only', 'icon-after';
$typography: (
  'xs': $sans-label-s,
  's': $sans-label-m,
  'm': $sans-label-l,
  'l': $sans-label-l,
);

@mixin button-colors-styles {
  @each $appearance in $appearances {
    &[data-appearance='#{$appearance}'] {
      @include label-color(simple-var($theme-variables, 'sys', $appearance, 'accent-default'));
      @include icon-fill(simple-var($theme-variables, 'sys', $appearance, 'accent-default'));

      border-color: simple-var($theme-variables, 'sys', $appearance, 'decor-default');

      &:hover {
        @include label-color(simple-var($theme-variables, 'sys', $appearance, 'accent-hovered'));
        @include icon-fill(simple-var($theme-variables, 'sys', $appearance, 'accent-hovered'));

        border-color: simple-var($theme-variables, 'sys', $appearance, 'decor-hovered');
      }

      &:focus-visible {
        @include label-color(simple-var($theme-variables, 'sys', $appearance, 'accent-hovered'));
        @include icon-fill(simple-var($theme-variables, 'sys', $appearance, 'accent-hovered'));

        border-color: simple-var($theme-variables, 'sys', $appearance, 'decor-hovered');
      }

      &:active {
        @include label-color(simple-var($theme-variables, 'sys', $appearance, 'accent-pressed'));
        @include icon-fill(simple-var($theme-variables, 'sys', $appearance, 'accent-pressed'));

        border-color: simple-var($theme-variables, 'sys', $appearance, 'decor-activated');
      }

      &:disabled,
      &[data-disabled] {
        @include label-color(simple-var($theme-variables, 'sys', 'neutral', 'text-disabled'));
        @include icon-fill(simple-var($theme-variables, 'sys', 'neutral', 'text-disabled'));

        border-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-disabled');
      }

      &[data-loading] {
        @include label-color(simple-var($theme-variables, 'sys', $appearance, 'accent-pressed'));
        @include icon-fill(simple-var($theme-variables, 'sys', $appearance, 'accent-pressed'));

        border-color: simple-var($theme-variables, 'sys', $appearance, 'decor-activated');
      }
    }
  }
}

@mixin button-outline-colors-styles {
  @each $appearance in $appearances {
    &[data-appearance='#{$appearance}'] {
      &:focus-visible {
        outline-color: $sys-available-complementary;
      }
    }
  }
}

.button {
  @include button-anatomy-styles($button-outline, $sizes, $variants, $typography);
  @include loading-label-only($button-outline);
  @include button-colors-styles;
  @include button-outline-colors-styles;
  @include button-common-state;
}
